<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import { PropType, watch, defineExpose } from 'vue';
import type { Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
const props = defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
	loading: Boolean,
	data: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	encodeY: {
		type: Number as PropType<number>,
		default: 1,
	},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
	() => props.loading,
	() => {
		if (props.loading) {
			return;
		}
		resize();
		setOptions({
			grid: { left: '30', bottom: '10', right: '10', top: '30', containLabel: true },
			tooltip: {
				trigger: 'axis',
			},
			toolbox: {
				feature: {
					saveAsImage: {},
				},
				top: -10,
			},
			legend: { show: true },
			xAxis: {
				show: true,
				type: 'category',
				axisLabel: { show: true, color: '#9b9c9c' },
				axisLine: { show: true, lineStyle: { color: '#9b9c9c', type: 'dotted' } },
				axisTick: { show: true, alignWithLabel: true },
				splitLine: { show: true, interval: 1, lineStyle: { color: '#eeeeee', type: 'dashed' } },
			},
			yAxis: {
				show: true,
				type: 'value',
				axisLabel: { show: true, showMinLabel: false, showMaxLabel: false, color: '#9b9c9c' },
				axisLine: { show: true, lineStyle: { color: '#9b9c9c', type: 'dotted' } },
				axisTick: { show: false },
				splitLine: { show: true, lineStyle: { color: '#eeeeee', type: 'dashed' } },
				min: function (v) {
					return (v.min * 0.8).toFixed(2);
				},
				max: function (v) {
					return (v.max * 1.2).toFixed(2);
				},
			},
			series: props.data.map((item: any) => {
				return {
					data: item.data,
					name: item.name,
					encode: { x: 'RecordTime', y: props.encodeY },
					connectNulls: false,
					type: 'line',
					smooth: true,
					symbol: 'circle',
					symbolSize: [12, 12],
					showSymbol: false,
					lineStyle: { width: 2 },
				};
			}),
		});
	},
	{ immediate: true }
);
defineExpose({
	resize,
});
</script>

<style lang="scss" scoped></style>
